<template>
    <div class="nav">
        <div class="container">
            <span v-for="(nav,index) in navList" :key="index">
                <router-link :to="nav.url" >{{ nav.title }}</router-link>
            </span>
        </div>
    </div>
</template>

<script>

export default {
  name: 'App',
  data:function(){
    return {
        navList:[
            {title:'首页',url:'/home'},
            {title:'PHP',url:'/cate/1'},
            {title:'Web前端',url:'/cate/2'}
        ]
    }
  }
}
</script>

<style>
.nav{background:#222;overflow:hidden;box-shadow:0 1px 1px rgba(0,0,0,0.3);}
.nav a{display:block;float:left;height:48px;line-height:48px;padding:0 14px;color:#fff;font-size:16px;transition:all 0.2s ease-out;border-right:1px solid #222;border-left:1px solid #222;}
.nav a:hover{background:#1066A4;}
.nav a.router-link-active{background:#1066A4;}
</style>